Skip to content

H5 App的本版控制

版本控制其实就是提醒用户升级App。回想一下App升级是如何进行的。iOS操心的比较少,更新前需要审核,然后才能在App Store上架。

所以主要是讨论H5打包成安卓apk如何实现版本控制的。

主要思路

  1. 首先,在主页或app.vue中使用plus.runtime.getProperty()获取到app的当前wgt包版本号
  2. 然后,向后端请求,会返回最新的版本号(需要手动去后台管理系统中上传一个wgt包,并输入这个wgt包的版本号),将这个版本号与当前App版本号进行对比,若当前版本号等于后端给你的版本号,就不升级,反之,则显示升级弹框,请用户下载升级(开发者调用下载安装api)
  3. 最后,使用plus.runtime.restart()进行app重启刷新,在设置中加一个plus.runtime.getProperty()获取到版本号

代码实现

js
const appVersion = ref('')

onMounted(() => {
  plus.runtime.getProperty(plus.runtime.appid, info => {
    appVersion.value = info.version
  })
})

const checkUpdate = async () => {
  showLoadingToast({
    duration: 1000 * 60,
    forbidClick: true,
    message: '检查更新...',
  })
  canUpdate.value = false
  const { data } = await getLatestVersion()

  if (!data || data.version === appVersion.value) {
    closeToast()
    showToast('当前版本已是最新版本')
    return
  }
  const { data: ossList } = await listByIds(data.ossId)
  if (!ossList?.length) {
    closeToast()
    showFailToast('获取最新版本下载地址失败,请重试!')
    return
  }
  closeToast()
  canUpdate.value = true
  await showUpdate(ossList[0].url)
}

const showUpdate = async url => {
  showConfirmDialog({
    title: '发现新版本',
    cancelButtonText: '暂不更新',
    confirmButtonText: '马上更新',
  })
    .then(() => {
      showLoadingToast({
        duration: 1000 * 60,
        forbidClick: true,
        message: '下载中...',
      })
      // 创建一个下载任务,并根据后端返回的apk静态资源地址filePath进行下载
      let dtask = plus.downloader.createDownload(url, {}, function (d, status) {
        // 下载完成
        if (status == 200) {
          closeToast()
          plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {}, function (error) {
            showFailToast('安装失败')
          })
        } else {
          closeToast()
          showFailToast('更新失败')
        }
      })
      dtask.start() // 下载任务开始下载
    })
    .catch(() => {
      //cancel
    })
}

Released under the MIT License.